﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Sisocana.Core.Models.RedSocialAsociadoModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Update Social Network
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<h2>Update Social Network</h2>
   <script src="<%: Url.Content("~/Scripts/jquery-ui-1.8.11.js") %>" type="text/javascript"></script>
    <link href="<%: Url.Content("~/Content/themes/base/jquery.ui.all.css") %>" rel="stylesheet" type="text/css" />

    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("p a, input:submit,input:file ").button();
        });
    </script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script>
<link rel="stylesheet" media="screen" type="text/css" href="../../Content/colorpicker/css/colorpicker.css" />
<script type="text/javascript" src="../../Content/colorpicker/js/colorpicker.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
    


    $( "#slider-heigth" ).slider({
			range: "min",			
			min: 60,
            
			max: 400,
			change: function( event, ui ) {
				$( "#lheigth" ).text("Heigth "+ $( "#slider-heigth" ).slider( "value" ) + "px");
                $( "#heigth" ).val($( "#slider-heigth" ).slider( "value" ) );
               
			},
            create: function( event, ui ) {
				var valor =$( "#heigth" ).val();
                $( "#slider-heigth" ).slider( "option", "value", valor );
			}
		});
		$( "#lheigth" ).text("Heigth "+ $( "#slider-heigth" ).slider( "value" ) + "px");
        $( "#heigth" ).val($( "#slider-heigth" ).slider( "value" ) );
        
     $( "#slider-width" ).slider({
			range: "min",			
			min: 60,
			max: 400,
			change: function( event, ui ) {
				$( "#lwidth" ).text("Width "+ $( "#slider-width" ).slider( "value" ) + "px");
                $( "#width" ).val($( "#slider-width" ).slider( "value" ) );
               
			},
            create: function( event, ui ) {
				var valor =$( "#width" ).val();
                $( "#slider-width" ).slider( "option", "value", valor );
			}
		});
		$( "#lwidth" ).text("Width "+ $( "#slider-width" ).slider( "value" ) + "px");
        $( "#width" ).val($( "#slider-width" ).slider( "value" ) );

    $( "#slider-amount" ).slider({
			range: "min",			
			min: 1,
			max: 6,
			change: function( event, ui ) {
				$( "#lcantVisualizar" ).text("Display Amount "+ $( "#slider-amount" ).slider( "value" ) + " elements");
                $( "#cantVisualizar" ).val($( "#slider-amount").slider( "value" ) );
               
			},
            create: function( event, ui ) {
				var valor =$( "#cantVisualizar" ).val();
                $( "#slider-amount" ).slider( "option", "value", valor );
			}
		});
		$( "#lcantVisualizar").text("Display Amount " + $( "#slider-amount").slider( "value" ) + " elements");
        $( "#cantVisualizar").val($( "#slider-amount").slider( "value" ) );


    $('#BackgroundShellColor').ColorPicker({
	onSubmit: function(hsb, hex, rgb, el) {
		$(el).val('#'+ hex);
		$(el).ColorPickerHide();
	},
    onChange: function (hsb, hex, rgb, el) {
		$('#BackgroundShellColor').css('backgroundColor', '#' + hex);
        $('#BackgroundShellColor').css('color', '#' + hex);
        $('#BackgroundShellColor').val('#' + hex);
	},
	onBeforeShow: function () {
		$(this).ColorPickerSetColor(this.value);
	},

    }).bind('keyup', function(){
	    $(this).ColorPickerSetColor(this.value);
    });



     $('#ShellColor').ColorPicker({
	onSubmit: function(hsb, hex, rgb, el) {
		$(el).val('#'+ hex);
		$(el).ColorPickerHide();
	},
    onChange: function (hsb, hex, rgb, el) {
		$('#ShellColor').css('backgroundColor', '#' + hex);
        $('#ShellColor').css('color', '#' + hex);
        $('#ShellColor').val('#' + hex);
	},
	onBeforeShow: function () {
		$(this).ColorPickerSetColor(this.value);
	},

    }).bind('keyup', function(){
	    $(this).ColorPickerSetColor(this.value);
    });




     $('#BackgroundTweetsColor').ColorPicker({
	onSubmit: function(hsb, hex, rgb, el) {
		$(el).val('#'+ hex);
		$(el).ColorPickerHide();
	},
    onChange: function (hsb, hex, rgb, el) {
		$('#BackgroundTweetsColor').css('backgroundColor', '#' + hex);
        $('#BackgroundTweetsColor').css('color', '#' + hex);
        $('#BackgroundTweetsColor').val('#' + hex);
	},
	onBeforeShow: function () {
		$(this).ColorPickerSetColor(this.value);
	},

    }).bind('keyup', function(){
	    $(this).ColorPickerSetColor(this.value);
    });



     $('#TweetsColor').ColorPicker({
	onSubmit: function(hsb, hex, rgb, el) {
		$(el).val('#'+ hex);
		$(el).ColorPickerHide();
	},
    onChange: function (hsb, hex, rgb, el) {
		$('#TweetsColor').css('backgroundColor', '#' + hex);
        $('#TweetsColor').css('color', '#' + hex);
        $('#TweetsColor').val('#' + hex);
	},
	onBeforeShow: function () {
		$(this).ColorPickerSetColor(this.value);
	},

    }).bind('keyup', function(){
	    $(this).ColorPickerSetColor(this.value);
    });

    $('#width,#heigth, #cantVisualizar').css('width', 40);

    col = $('#BackgroundShellColor').val();
    $('#BackgroundShellColor').css('width', 40).css('color', col ).css('backgroundColor',col);
    
    col = $('#ShellColor').val();
    $('#ShellColor').css('width', 40).css('color', col ).css('backgroundColor',col);

    col = $('#BackgroundTweetsColor').val();
    $('#BackgroundTweetsColor').css('width', 40).css('color', col ).css('backgroundColor',col);

    col = $('#TweetsColor').val();
    $('#TweetsColor').css('width', 40).css('color', col ).css('backgroundColor',col);
   
    });

</script>






<% using (Html.BeginForm()) { %>
    <%: Html.ValidationSummary(true) %>
    <fieldset>
        <legend>Social Network Information</legend>
        <%: Html.HiddenFor(model => model.idSitio)  %>
        <%: Html.HiddenFor(model => model.id)  %>       

        <div class="editor-label">
            <%: Html.LabelFor(model => model.RedesSocialesName,"Social Network Name") %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.RedesSocialesName, new { disabled = "disabled", @readonly = "readonly" })%>
            <%: Html.ValidationMessageFor(model => model.RedesSocialesName) %>
        </div>

        <div class="editor-label">
            <%: Html.LabelFor(model => model.tagUser,"User tag")%>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(model => model.tagUser)%>
            <%: Html.ValidationMessageFor(model => model.tagUser)%>
        </div>

        <div class="editor-label">
            <%: Html.LabelFor(model => model.tagBusqueda,"Search Tag") %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(model => model.tagBusqueda) %>
            <%: Html.ValidationMessageFor(model => model.tagBusqueda) %>
        </div>

        <div class="editor-label">
            <label id="lcantVisualizar" ></label>
        </div>
        <div class="editor-field">
            <%: Html.HiddenFor(model => model.cantVisualizar) %>
            <div id="slider-amount" class="customSlider"></div>           
            
        </div>

        </fieldset>
        <fieldset>
        <legend>Visual Customization</legend>   
            <div class="editor-field">
                <%: Html.HiddenFor(model => model.width)%>
                <label id="lwidth" ></label>                
            </div>
            <div id="slider-width" class="customSlider"></div>
            
            <div class="editor-field">
                <%: Html.HiddenFor(model => model.heigth)%> 
                <label id="lheigth" ></label>
            </div>
            <div id="slider-heigth" class="customSlider"></div>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.BackgroundShellColor,"Background Shell Color")%>
            </div>
            <div class="editor-field">
                <%: Html.EditorFor(model => model.BackgroundShellColor)%> 
                <%: Html.ValidationMessageFor(model => model.BackgroundShellColor)%>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.ShellColor,"Shell Color")%>
            </div>
            <div class="editor-field">
                <%: Html.EditorFor(model => model.ShellColor)%> 
                <%: Html.ValidationMessageFor(model => model.ShellColor)%>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.BackgroundTweetsColor, "Background Items Color")%>
            </div>
            <div class="editor-field">
                <%: Html.EditorFor(model => model.BackgroundTweetsColor)%>
                <%: Html.ValidationMessageFor(model => model.BackgroundTweetsColor)%>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.TweetsColor, "Items Color")%>
            </div>
            <div class="editor-field">
                <%: Html.EditorFor(model => model.TweetsColor)%> 
                <%: Html.ValidationMessageFor(model => model.TweetsColor)%>
            </div>
         </fieldset>


        <p>
            <input type="submit" value="Update" />
        </p>
    
<% } %>

<div>
    <%: Html.ActionLink("Back to List", "Conf", new { idsitio = Model.idSitio, tab = 3 })%>
</div>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="HeaderContent" runat="server">
</asp:Content>

